<template>
  <div>
    <el-dialog
      :title="doEdit?'操作':'查看'"
      ref="tableDialog"
      :visible.sync="dialogVisible"
      width="80%"
      v-if="formData"
      @close="close"
    >
      <el-form :model="formData" label-width="100px" ref="form">
        <el-row>
          <el-col :sm="12">
            <el-form-item label="申请人">{{formData.userName}}</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="所在单位">{{formData.companyName}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :sm="12">
            <el-form-item label="申请时间">{{formData.createtime}}</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="用车人数">{{formData.pcount}}人</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :sm="24">
            <el-form-item label="用车理由">{{formData.reason}}</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :sm="12">
            <el-form-item label="开始时间">{{formData.starttime}}</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="结束时间">{{formData.endtime}}</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :sm="12">
            <el-form-item label="始发地">{{formData.origin}}</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="目的地">{{formData.destination}}</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :sm="24">
            <el-form-item label="申请备注">{{formData.reason}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :sm="24">
            <el-form-item label="状态">{{formData.processType}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :sm="24">
            <el-form-item label="指派车辆">{{diaodu.carcode}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :sm="12">
            <el-form-item label="指派司机">{{diaodu.driverName}}</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="司机号码">{{diaodu.driverMobile}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :sm="12">
            <el-form-item label="出发地点">{{diaodu.startaddress}}</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="目的地">{{diaodu.endaddress}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-timeline :reverse="true">
        <el-timeline-item
          v-for="(activity, index) in history"
          :key="index"
          :timestamp="activity.optime"
        >
          {{activity.taskName}}。操作人：
          {{activity.userName}}，
          备注：
          {{activity.mark||' - '}}。
          <template>
            <span v-if="activity.passStr">--------- {{activity.passStr}}</span>
          </template>
        </el-timeline-item>
      </el-timeline>
      <el-form label-width="80px">
        <template v-if="doEdit">
          <el-row>
            <el-col :sm="24">
              <el-form-item label="是否启动" v-if="formKey!='diaodu_over'">
                <el-radio-group v-model="pass">
                  <el-radio :label="1">启动</el-radio>
                  <el-radio :label="0">终止行程</el-radio>
                </el-radio-group>
              </el-form-item>
              <template v-if="formKey=='diaodu_over'">
                <div>
                  <el-form-item label="是否结束">
                    <el-radio-group v-model="pass">
                      <el-radio :label="1">完成行程</el-radio>
                      <el-radio :label="0">终止行程</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="产生费用">
                    <el-radio-group v-model="fy">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="停车费" style="margin-top:10px;" v-if="fy==1">
                    <el-input v-model="tcf" type="number" :min="0"></el-input>
                  </el-form-item>
                  <el-form-item label="其他费用" style="margin-top:10px;" v-if="fy==1">
                    <el-input v-model="qtf" type="number" :min="0"></el-input>
                  </el-form-item>
                </div>
              </template>
              <el-row style="margin-top:10px;">
                <el-col :sm="24">
                  <el-form-item label="备注">
                    <el-input v-model="formData.shenhemark" type="textarea" placeholder="请输入备注"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: left;">
        <el-button @click="close">关闭</el-button>
        <el-button type="primary" @click="qidong" v-if="doEdit&&type==0&&formKey!='diaodu_over'">保存</el-button>
        <el-button
          type="primary"
          @click="completeDiaodu"
          v-if="doEdit&&type==0&&formKey=='diaodu_over'"
        >保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { viewJson, qidong, completeDiaodu } from "@/api/task";
import { update } from "@/api/usecar";
import { listJson } from "@/api/car";
import { listJson as driverListJson } from "@/api/driver";
import { dateFormat } from "@/utils/utils";
export default {
  data() {
    return {
      driverId: null,
      pass: 1,
      fy: 0, //：是否产生费用
      tabIndex: "1",
      jstime: "",
      carId: null,
      jsaddress: "",
      shenhemark: "",
      qtf: 0, //tcf 停车费,Float qtf 其他费
      tcf: 0,
      opData: null,
      history: [],
      formData: null,
      doEdit: false,
      dialogVisible: false,
      type: 0, //0待办任务 2历史任务
      carList: [], //车辆选择列表
      driverList: [], //司机选择列表
      diaodu: {}, //调度信息
      formKey: "",
    };
  },
  methods: {
    close() {
      this.dialogVisible = false;
    },
    /**
     * @description 操作任务
     * @param opData 当前操作的任务原始数据 list接口返回的
     * @param type 当前列表的类型 0待办任务 2历史任务 2类型时候，只有调度员可编辑且不能再修改备注了
     */
    editTask(opData, type, formKey) {
      this.viewTask(opData, type);
      this.doEdit = true;
      this.tabIndex = "3";
      this.type = type;
      this.formKey = formKey;
    },
    /**
     * @description 查看任务
     * @param opData 当前操作的任务原始数据 list接口返回的
     * @param type 当前列表的类型 0待办任务 2历史任务 2类型时候，只有调度员可编辑且不能再修改备注了
     */
    async viewTask(opData, type) {
      this.type = type;
      this.doEdit = false;
      this.tabIndex = "1";
      this.opData = opData;
      let params = {
        tableId: opData.tableId,
        pid: opData.processInstanceId,
        taskId: opData.taskId,
        formKey: opData.formKey,
      };
      let r = await viewJson(params);
      this.dialogVisible = true;
      let padding = r.usecar.carcount - r.usecar.usecaritems.length;
      r.usecar.usecaritems.forEach((element) => {
        element.carCode = element.carcode;
        element.driverId = element.driverid;
        element.carId = element.carid;
      });
      for (let i = 0; i < padding; i++) {
        r.usecar.usecaritems.push({
          driverId: null,
          carId: null,
          driverName: null,
          carCode: null,
        });
      }
      this.jstime = r.usecar.starttime;
      this.jsaddress = r.usecar.origin;
      this.formData = r.usecar;
      this.diaodu = r.diaodu; //调度信息 展示给司机看
    },
    //处理流程 开始行程
    async qidong() {
      let param = {};
      param["pass"] = this.pass ? "true" : "false";
      param["mark"] = this.formData.shenhemark || "";
      param["tableId"] = this.opData.tableId;
      param["taskId"] = this.opData.taskId;
      param["formKey"] = this.opData.formKey;
      param["pid"] = this.opData.processInstanceId;
      let d = await qidong(param);
      if (d.error == 0) {
        this.$message("操作成功");
        this.finish();
      } else {
        this.$message("操作失败");
      }
    },
    //结束行程
    async completeDiaodu() {
      let param = {};
      param["pass"] = this.pass ? "true" : "false";
      param["fy"] = this.fy;
      param["tcf"] = this.tcf;
      param["qtf"] = this.qtf;
      param["mark"] = this.formData.shenhemark || "";
      param["tableId"] = this.opData.tableId;
      param["taskId"] = this.opData.taskId;
      param["formKey"] = this.opData.formKey;
      param["pid"] = this.opData.processInstanceId;
      let d = await completeDiaodu(param);
      if (d.error == 0) {
        this.$message("操作成功");
        this.finish();
      } else {
        this.$message("操作失败");
      }
    },
    //各种操作完成后关闭对话框刷新父组件列表
    finish() {
      this.close();
      this.$parent.fetchData();
    },
  },
};
</script>